bitforum-frontend/app/(main)/(forum)/board/[code]/style.scss

#board {
	position: relative;
	padding: 25px 32px 32px 32px;
	min-width: 270px;
	max-width: 1920px;
	margin: 0 auto;

	h1 {
		font-size: 22px;
		margin-bottom: 20px;
	}

	// 검색 조건
	.list-header, .list-footer {
		select, input[type="search"], input[type="radio"] {
			height: 34px;
		}

		input[type="radio"] {
			position: absolute;
			opacity: 0;
			pointer-events: none;
		}

		a, button {
			line-height: 34px;
			padding: 0 15px;
		}
	}

	// 상단 제어 버튼
	.list-header {
		display: grid;
		grid-template-columns: 1fr auto auto;
		gap: 7px;
		align-items: end;

		section:first-child {
			flex: 1 1 auto;
			min-width: 0;
		}

		article {
			overflow: hidden;       	// 넘치는 애들은 숨김
			white-space: nowrap;    	// 줄바꿈 방지
			text-overflow: ellipsis;	// 필요 시 말줄임
			display: flex;
			gap: 0.5rem;
			overflow-x: auto;
			-webkit-user-select: none;
			user-select: none;
			cursor: grab;
			touch-action: pan-y;

			ul {
				display: flex;
			  	gap: 0.5rem;

			  	li {
					flex-shrink: 0;

					label {
						display: block;
						line-height: inherit;
						padding: 0.25rem 0.75rem;
						background: #f1f1f1;
						border-radius: 6px;
						white-space: nowrap;
						cursor: pointer;

						&:hover, &:focus {
							color: #c7511f;
							background: #e1e1e1;
							text-decoration: underline;
						}

						&.active {
							background: #000;
							color: #f1f1f1;
						}
					}
			  	}
			}
		}
	}

	// 하단 제어 버튼
	.list-footer {
		display: grid;
		grid-template-columns: 1fr auto;

		.search-toggle {
			display: none;
		}

		> section[aria-label='게시글 검색'] > form {
			display: flex;
			align-items: center;
			gap: 7px;
		}
	}

    @media (max-width: 576px) {
		.list-footer {
			grid-template-columns: auto 1fr auto;
			align-items: center;

			.search-toggle {
				grid-column: 1;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				height: 100%;
			}

			> section[aria-label='게시글 검색'] {
				display: none;
			}

			> section[aria-label='글쓰기 버튼'] {
				grid-column: 3;
			}
		}
    }

	@media (max-width: 768px) {
		.list-footer {
			> section[aria-label='게시글 검색'] {
				form {
					padding-right: 7px;

					select {
						flex-grow: 0;
					}

					input {
						flex-grow: 1;
					}
				}
			}
		}
	}
}